<template>
	<view class="container">
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item, index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[current == index ? 'tui-item-active' : '']" :data-index="index" @tap="tabbarSwitch">
					<tui-icon
						:name="current == index ? item.icon + '-fill' : item.icon"
						:color="current == index ? '#00C0FB' : '#666'"
						:size="item.size"
						:class="[index == 0 ? 'tui-ptop-4' : '']"
					></tui-icon>
					<view class="tui-scale">{{ item.text }}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		<!--searchbox-->
		<view class="tui-searchbox">
			<view class="tui-search-input" @tap="search">
				<icon type="search" size="15" color="#999"></icon>
				<text class="tui-search-text">搜索</text>
			</view>
		</view>
		<!--searchbox-->

		<block v-for="(item, index) in msgList" :key="index">
			<tui-list-cell @click="detail(item.id, item.nickname)" :unlined="true">
				<view class="tui-chat-item">
					<view class="tui-msg-box">
						<image :src="item.pic" class="tui-msg-pic" mode="widthFix"></image>
						<view class="tui-msg-item">
							<view class="tui-msg-name">{{ item.nickname }}</view>
							<view class="tui-msg-content">{{ item.msg }}</view>
						</view>
					</view>
					<view class="tui-msg-right" :class="[item.level == 3 ? 'tui-right-dot' : '']">
						<view class="tui-msg-time">{{ item.time }}</view>
						<tui-badge :type="item.level == 2 ? 'gray' : 'danger'" :dot="item.level == 3 ? true : false" v-if="item.msgNum > 0">
							{{ item.level != 3 ? item.msgNum : '' }}
						</tui-badge>
					</view>
				</view>
			</tui-list-cell>
		</block>
		<view class="tui-safearea-bottom"></view>
	</view>
</template>

<script>
const db=uniCloud.database();
export default {
	data() {
		return {
			current: 0,
			tabbar: [
				{
					icon: 'community',
					text: '消息',
					size: 24
				},
				{
					icon: 'people',
					text: '联系人',
					size: 24
				},
				{
					icon: 'explore',
					text: '发现',
					size: 24
				}
			],
			msgList: []
		};
	},
	onLoad() {
		this.getMsgList();
	},
	methods: {
		async getMsgList() {
			const {result}= await uniCloud.callFunction({
				name:'msg-chat',
				data:{
					type:'get_frenid_list'
				}
			});
			const ress=result.data;
			
			ress.forEach(item => {
				this.msgList.push({
					nickname: item.nickname,
					pic: item?.avatar_file?.url,
					msg: item.register_ip,
					time: '13:27',
					id:item._id
				});
			});
		},
		tabbarSwitch: function(e) {
			let index = e.currentTarget.dataset.index;
			this.current = index;
			if (index != 0) {
				if (index == 1) {
					uni.navigateTo({
						url: '../friendList/friendList'
					});
				} else {
					this.tui.toast('功能开发中~');
				}
			}
		},
		search: function() {
			uni.navigateTo({
				url: '../../news/search/search'
			});
		},
		detail: function(id, name) {
			uni.navigateTo({
				url: '../chat/chat?id=' + id + '&&name=' + name
			});
		},
		// 更新用户列表
		uploadUserList(e) {
			console.log(e);
			let list = [];
			const oldData = e.client_list;
			uni.setStorageSync('userInfos', e);
			if (oldData) {
				for (let key in oldData) {
					list.push({
						nickname: oldData[key],
						pic: 'avatar_2',
						msg: 'thorui商城模板即将上线，功能完善中！',
						msgNum: 2,
						time: '13:27',
						level: 3,
						id: key
					});
				}
				list.push({
					nickname: '群聊',
					pic: 'avatar_1',
					msg: 'thorui商城模板即将上线，功能完善中！',
					msgNum: 2,
					time: '13:27',
					level: 3
				});
				this.msgList = list;
			}
		}
	},
	onPullDownRefresh: function() {
		uni.stopPullDownRefresh();
	}
};
</script>

<style>
.container {
	padding-bottom: 100rpx;
}

/*tabbar*/

.tui-tabbar {
	width: 100%;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 99999;
	background-color: #fff;
	height: 100rpx;
	left: 0;
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}

.tui-tabbar::before {
	content: '';
	width: 100%;
	border-top: 1rpx solid #d2d2d2;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.tui-tabbar-item {
	flex: 1;
	width: 25%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	font-size: 24rpx;
	color: #666;
	height: 80rpx;
}

.tui-ptop-4 {
	padding-top: 4rpx;
}

.tui-scale {
	font-weight: bold;
	transform: scale(0.8);
	transform-origin: center 100%;
	line-height: 30rpx;
}

.tui-item-active {
	color: #00c0fb !important;
}

/*tabbar*/

/*searchbox*/

.tui-searchbox {
	width: 100%;
	height: 100rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.tui-search-input {
	width: 100%;
	height: 72rpx;
	background: #fafafa;
	border-radius: 36rpx;
	font-size: 30rpx;
	color: #a8abb8;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-search-text {
	padding-left: 16rpx;
}

/*searchbox*/

.tui-chat-item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-msg-box {
	display: flex;
	align-items: center;
}

.tui-msg-pic {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: block;
	margin-right: 24rpx;
}

.tui-msg-item {
	max-width: 500rpx;
	min-height: 80rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tui-msg-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 34rpx;
	line-height: 1;
	color: #262b3a;
}

.tui-msg-content {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 28rpx;
	line-height: 1;
	color: #9397a4;
}

.tui-msg-right {
	max-width: 120rpx;
	height: 88rpx;
	margin-left: auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.tui-msg-right.tui-right-dot {
	height: 76rpx;
	padding-bottom: 10rpx;
}

.tui-msg-time {
	width: 100%;
	font-size: 24rpx;
	line-height: 24rpx;
	color: #9397a4;
}
</style>
